<template>
  <div class="app-container">

    <div class="filter-container">

      <div>
        <el-upload style="float: left"
                   class="upload-demo "
                   :action="'/guard/user/chengbao/uploadChengBao?token='+token"
                   accept=".xls,.xlsx"
                   :show-file-list="false"
                   :on-success="uploadSuccess"
        >
          <el-button size="small" type="primary" class="filter-item">导入承保单</el-button>
        </el-upload>
        <el-button @click="download({id:1},'chengbao')" style="width: 100px;margin-left: 10px" size="small" type="primary" class="filter-item">下载模板</el-button>
      </div>


      <el-input  style="width: 200px;"   v-model="query.importNumber" placeholder="导入编号" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.beibaoName" placeholder="被保人" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.organName" placeholder="所属机构" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.baoxianType" placeholder="险种名称" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.carNumber" placeholder="车牌号" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"   v-model="query.useWay" placeholder="使用性质" class="filter-item"  ></el-input>
      <el-input  style="width: 200px;"  type="number"  v-model="query.seat" placeholder="座位" class="filter-item"  ></el-input>
      <el-date-picker class="filter-item"
                      v-model="query.baoxianSDate"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="保险起期"
                      end-placeholder="保险起期"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>
      <el-date-picker class="filter-item"
                      v-model="query.baoxianEDate"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="保险止期"
                      end-placeholder="保险止期"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>
      <el-date-picker class="filter-item"
                      v-model="query.toubaoDate"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="投保日期"
                      end-placeholder="投保日期"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>
      <el-date-picker class="filter-item"
                      v-model="query.serviceBuyDate"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="购买时间"
                      end-placeholder="购买时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>

      <el-date-picker class="filter-item"
                      v-model="query.createdAt"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="创建时间"
                      end-placeholder="创建时间"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>

      <el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="getRecords" type="primary" class="filter-item">刷新</el-button>
      <el-button @click="exportFile" type="primary" class="filter-item">导出</el-button>
      <el-button v-if="account=='SuperAdmin'" @click="clear" type="primary" class="filter-item">清空数据</el-button>
    </div>

    <el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row
              v-horizontal-scroll="'always'"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <!-- <el-table-column type="index" label="序列" width="50" /> -->
      <el-table-column prop="id" label="ID" width="50" />
      <el-table-column prop="import_number" label="导入编号" width="130" />
      <el-table-column prop="service_buy_date" label="购买日期" width="120" />
      <el-table-column prop="san_ji_organ" label="三级机构" min-width="200" />
      <el-table-column prop="organ_name" label="所属机构" min-width="200" />
      <el-table-column prop="jue_ce_unit" label="决策单元" min-width="200" />
      <el-table-column prop="baoxian_type" label="险种名称" min-width="200"/>
      <el-table-column prop="baodan_order_number" label="保单号" width="180" />
      <el-table-column prop="car_number" label="车号" width="100" />
      <el-table-column prop="toubao_name" label="投保人" min-width="200"/>
      <el-table-column prop="beibao_name" label="被保人" min-width="200"/>
      <el-table-column prop="toubao_date" label="投保日期" width="100" />
      <el-table-column prop="baoxian_s_date" label="保险起期" width="100" />
      <el-table-column prop="baoxian_e_date" label="保险止期" width="100" />
      <el-table-column prop="he_bao_date" label="核保日期" width="100" />
      <el-table-column prop="san_zhe_xian_bao_price" label="三者险保额" width="100" />
      <el-table-column prop="cheng_jia_yi_wai_price" label="驾乘意外险保费" width="120" />
      <el-table-column prop="shang_ye_che_shang_price" label="商业车上人员保费" width="150" />
      <el-table-column prop="car_ship_price" label="车船税" width="80" />
      <el-table-column prop="baoxian_shui_price" label="含税保费" width="80" />
      <el-table-column prop="baoxian_not_shui_price" label="不含税保费" width="100" />
      <el-table-column prop="car_type_name" label="车型名称" width="180" />
      <el-table-column prop="car_jia_number" label="车架号（VIN）" width="180" />
      <el-table-column prop="enginee_number" label="发动机号" width="150" />
      <el-table-column prop="enginee_number" label="车型名称" width="150" />
      <el-table-column prop="car_type" label="车辆种类" width="120" />
      <el-table-column prop="chu_deng_date" label="车辆初登日期" width="120" />
      <el-table-column prop="use_way" label="使用性质" width="100" />
      <el-table-column prop="seat" label="座位" width="50" />
      <el-table-column prop="get_guard_user.name" label="账号" width="120" />
      <el-table-column prop="created_at" label="创建时间" width="160" />
<!--      <el-table-column fixed="right" label="操作" width="130">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>-->
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    <el-dialog
      :close-on-click-modal="false"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>{{uploadResMsg}}</span>
    </el-dialog>


  </div>
</template>

<script>

import { myGet,myPost } from '@/utils/myRequest'
import { getToken } from '@/utils/auth'
import { exportXls, toParams } from '@/utils/myUtils'

const urlUserLst = '/guard/user/chengbao/lst';
const urlAdd = '/guard/user/chengbao/add';
const urlDetail = '/guard/user/chengbao/detail';
const urlDel = '/guard/user/chengbao/del';
const urlExport = '/guard/user/chengbao/exportFile';
const urlDownload = '/guard/download';
export default {

  data() {
    return {
      query:{
        importNumber:'',
        carNumber:'',
        useWay:'',
        seat:'',
        organName:'',
        beibaoName:'',
        baoxianType:'',
        baoxianSDate:[],
        baoxianEDate:[],
        toubaoDate:[],
        chuXianDate:[],
        serviceBuyDate:[],
        createdAt:[],
      },
      account:'',
      token:'',
      host:process.env.VUE_APP_HOST,
      isAdd:true,
      dialogFormVisible:false,
      list: [],
      formLoading:false,
      listLoading: true,
      dialogVisible:false,
      uploadResMsg:'',
      pagination:{
        total:0,
        page:1,
        pageSize:20,
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  methods: {

    clear(){
      this.$prompt('请输入导入编号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '导入编号',
        inputValidator: (value) => {
          if(!value) {
            return '导入编号不能为空！';
          }
        },
      }).then(({ value }) => {

        myGet(urlDel, { ids:value }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    exportFile(){
      const url = urlExport+"?"+toParams(this.query)
      exportXls(url)
    },
    download(row,type){
      const url = urlDownload+"?type="+type+"&id="+row.id
      console.log(url)
      exportXls(url)
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formLoading = true;
          myPost(urlAdd,this.form).then(res=>{
            this.formLoading = false;
            if(res.status){
              this.dialogFormVisible = false
              Object.assign(this.form,this.$options.data().form)
              this.$message.success(res.msg);
              this.reload();
            }
          })
        } else {
          //this.$message.error('验证失败！');
          return false;
        }
      });
    },
    openAddDialog(){
      Object.assign(this.form,this.$options.data().form);
      this.dialogFormVisible = true
    },
    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true;
      let params = Object.assign(this.query,this.pagination)
      myGet(urlUserLst,params).then((res) =>{
        this.listLoading = false;
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    changeStatus(row){
      myPost(urlAdd,{id:row.id, status:row.status}).then(res => {
        if(res.status){
          this.$message.success(res.msg)
        }
      })
    },
    handleEdit(index, row) {
      const id = row.id
      myGet(urlDetail,{id}).then(res=>{
        if(res.status){
          Object.assign(this.form,res.data.records[0]);
          this.form.type +=""
          this.dialogFormVisible = true
        }
      })
    },
    handleDelete(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = row.id
        myGet(urlDel, { ids }).then(res => {
          if (res.status) {
            this.$message.success(res.msg);
            this.reload();
          }
        })
      })
    },
    uploadSuccess(res, file, fileList){
      if(res.status){
        this.dialogVisible = true
        this.uploadResMsg = res.msg
        this.reload()
      }else{
        this.$message.error(res.msg)
      }
    },

    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getRecords();
    },
    //多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
  },
  mounted() {
    this.getRecords()
    this.token = getToken();

    myGet('/guard/rbac/guardUser/getUserByToken',{token:this.token}).then(res=>{
      if(res.status){
        this.account = res.data.records[0].name
      }
    })

  }
}
</script>

<style>

.el-table th.gutter{
  display: table-cell!important;
}

.table-img{
  width: 50px;
  height: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>


